import React, { useRef, useState, useEffect } from 'react';
import { connect } from 'umi';
import { Radio, Row, Col, Card, Space, Button, Modal } from 'antd';
import { order_status, goodsType_status, operation_statusinfo, } from '@/common/contact'
import TableDataBlock from '@/components/TableDataBlock';
import PopImgShow from '@/components/PopImgShow';
import CardMask from './components/CardMask'
import { useUpdateEffect } from 'ahooks';
import { workType_status, stage_tab } from '@/common/contact'
import Indentation from '@/components/Indentation'
import { uploadFile } from '@/utils/utils'
import SaleTypeModel from './components/SaleTypeModel';
import CancelOrder from './components/CancelOrder';
const OrderList = (props) => {
  const { loading, dispatch, list, history, departmentList, teamList } =
    props;
  const { location } = history;
  const { query } = location;
  const { accessId } = query
  const childRef = useRef();
  const [visible, setVisible] = useState(false);
  const [organizationAuthAdminList, setOrganizationAuthAdminList] = useState([])
  const [searchData, setSearchData] = useState({})
  const [saleVisible, setSaleVisible] = useState(false)
  const [cancelVisible, setCancelVisible] = useState(false)
  const [active, setActive] = useState('')
  useEffect(() => {


  }, []);
  const handleCallback = () => {
    childRef.current.fetchGetData();
  };

  useUpdateEffect(() => {
    handleCallback()
  }, [active])

  const onChange = (e) => {
    setActive(e.target.value);
  };
  const extraBtn = [
    {
      text: '导出',
      onClick: () => {
        dispatch(
          {
            type: "order/fakeExportUserOrder",
            payload: { ...searchData, status: active, },
            callback: (e) => {
              const { url } = e
              uploadFile(url)
            }
          });
      },
    },
  ];
  const searchItems = [
    {
      label: '用户姓名或手机',
      name: 'keyword',
    },
    {
      label: '订单编号',
      name: 'orderSn',
    },

    {
      label: '订单类型',
      name: 'orderType',
      type: 'select',
      select: goodsType_status,
    },
    {
      label: '审核状态',
      name: 'operationStatus',
      type: 'select',
      select: operation_statusinfo,
    },
    {
      label: '实付金额:',
      selectKey: ['minPayFee', 'maxPayFee'],
      type: 'numberGroup',
    },

    {
      label: '商品名称',
      name: 'goodsName',
    },

    {
      label: '创建时间',
      type: 'rangePicker',
      name: 'createStartTime',
      end: 'createEndTime',
    },

    {
      label: '创建人',
      name: 'enterAdminId',
      fieldNames: { label: 'username', value: 'id' },
      type: 'user',
    },
  ];
  const getColumns = [
    {
      title: '姓名',
      dataIndex: 'username',
    },
    {
      title: '手机',
      dataIndex: 'mobile',
    },
    {
      title: '订单时间',
      dataIndex: 'createTime',
    },
    {
      title: '订单信息',
      dataIndex: 'orderDesc',
      render: (e) => {
        const goods = e ? JSON.parse(e) : {}
        const { goodsCover, goodsName } = goods
        return <Indentation str={goodsName}></Indentation>
      }
    },
    {
      title: '订单编号',
      dataIndex: 'orderSn',
    },
    {
      title: '订单类型',
      dataIndex: 'orderType',
      render: (e) => {
        return goodsType_status[e]
      },
    },
    {
      title: '创建人',
      dataIndex: 'addAdminName',
    },
    {
      title: '服务类型',
      dataIndex: 'workType',
      render: (e) => {
        return workType_status[e]
      }
    },
    {
      title: '应收',
      dataIndex: 'payFee',
    }, {
      title: '实收',
      dataIndex: 'realPayFee',
    },
    {
      title: '欠费',
      dataIndex: 'remainMoney',
    },
    {
      title: '运费',
      dataIndex: 'expressPrice',
    },

    {
      title: '状态',
      dataIndex: 'status',
      render: (e) => {
        return order_status[e]
      },
    },
    {
      title: '商品数量',
      dataIndex: 'goodsAmount',
    },
    {
      title: '支付时间',
      dataIndex: 'payTime',
    },
    {
      title: '复核人',
      dataIndex: 'checkAdminName',
    },
    {
      title: '复核时间',
      dataIndex: 'checkTime',
    },
    {
      title: '部门',
      dataIndex: 'departmentName',
    },
    {
      title: '分组',
      dataIndex: 'teamName',
    },


    // {
    //   title: '头像',
    //   dataIndex: 'profile',
    //   render: (e) => {
    //     return <PopImgShow url={e}></PopImgShow>
    //   }
    // },

    {
      type: 'handle',
      width: 200,
      dataIndex: 'id',
      render: (val, record) => [
        {
          title: '详情',
          click: () => {
            history.push({
              pathname: '/order/orderDetails',
              query: {
                orderSn: record.orderSn,
                accessId,
                linkType: 'organization',
                setType: "organization"
              }
            })
          },
        },
      ],
    },
  ];
  const TabList = [{
    label: '全部',
    key: '',
  },
  {
    label: '已支付',
    key: '1',
  },
  {
    label: '已完成',
    key: '3',
  },
  {
    label: '待支付',
    key: '0',
  },
  {
    label: '已关闭',
    key: '2',
  },
  ]
  return (
    <Card title='机构订单'>
      <Row gutter={[0, 12]}>
        <Col span={24}>
          <Radio.Group
            value={active}
            onChange={onChange}
            style={{
              marginBottom: 16,
            }}
          >
            {TabList.map((item, index) => {
              return <Radio.Button key={index} value={item.key}>{item.label}</Radio.Button>
            })}
          </Radio.Group>
        </Col>
        <Col span={24}>
          <TableDataBlock
            btnExtra={extraBtn}
            searchCallback={(e) => { setSearchData(e) }}
            params={{ status: active }}
            cRef={childRef}
            loading={loading}
            searchItems={searchItems}
            columns={getColumns}
            rowKey={(record) => `${record.id}`}
            dispatchType="order/fetchSearchOrder"
            {...list}
          ></TableDataBlock>
        </Col>

        <CardMask visible={visible} onClose={() => setVisible(false)}></CardMask>
      </Row>
      <SaleTypeModel visible={saleVisible} onClose={() => setSaleVisible(false)}></SaleTypeModel>
      <CancelOrder handleCallback={handleCallback} visible={cancelVisible} onClose={() => setCancelVisible(false)}></CancelOrder>

    </Card>


  );
};

export default connect(({ order, loading }) => ({
  list: order.orderList,
  loading: loading.models.order,
}))(OrderList);
